<template>
  <div class='bg-form'>
    <el-form :model='addForm' label-width='160px' :show-message='false' :rules='addFormRules' ref='addForm'>
      <el-row>
        <el-col :span='12'>返利信息</el-col>
      </el-row>
      <el-divider content-position='center'></el-divider>
      <el-row>
        <el-col :span='8'>
          <el-form-item label='门店:' prop='storeId'>
            <el-select
              class='w-100'
              clearable
              v-model='addForm.storeId'
              placeholder='门店'
            >
              <el-option
                v-for='item in stores'
                :key='item.id'
                :value='item.id'
                :label='item.storeName'
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label='返利类型:' prop='typeDictId'>
            <el-select
              class='w-100'
              clearable
              v-model='addForm.typeDictId'
              placeholder='返利类型'
            >
              <el-option
                v-for="(item) in dict['预估返利类型']"
                :key='item.index'
                :value='item.value'
                :label='item.text'
              />
            </el-select>
          </el-form-item>
        </el-col>
         <el-col :span='8'>
          <el-form-item label='返利月份:' prop='rebateMonth'>
            <el-date-picker
              class='w-100'
              v-model='addForm.rebateMonth'
              type='month'
              value-format='yyyy-MM'
              placeholder='选择返利月份'>
            </el-date-picker>
          </el-form-item>
        </el-col>
    
        <el-col :span='8'>
          <el-form-item label='品牌:' prop='userName'>
            <el-select
              class='w-100'
              clearable
              v-model='addForm.carBrandId'
              placeholder='请选择品牌'
              @change='handleCarBrand'
            >
              <el-option
                v-for='item in allBrand'
                :key='item.id'
                :value='item.id'
                :label='item.name'
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label='车系' prop='seriesId'>
            <el-select class='w-100' clearable v-model='addForm.seriesId' placeholder='车系' filterable
                       @change='seriesChangeHandle'>
              <el-option v-for='item in vehicleList' :key='item.id' :value='item.id' :label='item.name' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label='年款' prop='timeType'>
            <el-select class='w-100' clearable v-model='addForm.timeType' filterable placeholder='年款'
                       @change='timeTypeChangeHandle'>
              <el-option v-for='item in timeTypeList' :key='item' :value='item' :label='item' />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label='车型' prop='modelId'>
            <el-select class='w-100' clearable v-model='addForm.modelId' filterable placeholder='车型'>
              <el-option v-for='item in modelList' :key='item.id' :value='item.id' :label='item.modelName' />
            </el-select>
          </el-form-item>
        </el-col>
       
        <el-col :span='8'>
          <el-form-item label='未确认进口车:' prop='wqrjkc'>
            <el-input v-model='addForm.wqrjkc' clearable placeholder='未确认进口车'></el-input>
          </el-form-item>
        </el-col>
    
        <el-col :span='8'>
          <el-form-item label='未确认国产车:' prop='wsrgcc'>
            <el-input v-model='addForm.wsrgcc' clearable placeholder='未确认国产车'></el-input>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label='总金额:' prop='amount'>
            <el-input-number v-model='addForm.amount' @change="totalSS" controls-position="right" clearable placeholder='总金额'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span='8'>
          <el-form-item label='增值税税率' prop='zzs'>
            <el-select class='w-100' @change="totalSS" clearable v-model='addForm.zzs' placeholder='请选择' filterable>
              <el-option v-for='item in rateList["增值税税率"]' :key='item.id' :value='item.value' :label='item.text' />
            </el-select>
          </el-form-item>
        </el-col>

   <el-col :span='8'>
     <!--  {{((addForm.amount/(1+addForm.zzs))*addForm.zzs).toFixed(2)}} -->
          <el-form-item label='税额' prop='taxAmount'>
           <el-input v-model="addForm.taxAmount" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span='16'>
          <el-form-item label='备注:' prop='remark'>
            <el-input type='textarea' :autosize='{ minRows: 4, maxRows: 6}' v-model='addForm.remark' clearable
                      placeholder='备注'></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span='24' align='right'>
        <el-button type='primary' @click="onSubmit('addForm')">保存</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getDict } from '@/utils/index'
import { mapGetters } from 'vuex'
import { save, details, update } from '@/api/pre-sale/newCarRebate'
import { getAllBrand, getModelRank, getModelTimeType, getSeries } from '@/api/after-sale/systemManage/carModel'

export default {
  computed: {
    ...mapGetters(['stores'])
  },
  data() {
    return {
      allBrand: [],
      vehicleList: [],
      timeTypeList: [],
      modelList: [], // 车型
      tableData: [{
        storeName: 1
      }],
       rateList:[],//getDict(['增值税税率'])('增值税税率'),
      dict: {
        sites: ['预估返利类型'],
        types: ['PC端', 'APP端'],
       
      },
      addForm: {
        carBrandId: '',
        seriesId: '',
        timeType: '',
        modelId: ''
      },
      addFormRules: {
        storeId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        typeDictId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        rebateMonth: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        amount: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        zzs: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      }
    }
  },
  async mounted() {
    this.dict = getDict(this.dict.sites)
    this.rateList=getDict(['增值税税率'])
    if (this.$route.query.id) {
      this.details()
    }
    await getAllBrand().then((res) => {
      const { success, data } = res
      if (success) this.allBrand = data
    })
  },
  methods: {
    totalSS(){
      this.addForm.taxAmount=((this.addForm.amount/(1+this.addForm.zzs))*this.addForm.zzs).toFixed(2)
    },
    // 品牌
    handleCarBrand(carBrandId) {
      const addForm = this.addForm
      addForm.seriesId = ''
      addForm.timeType = ''
      addForm.modelId = ''

      this.vehicleList = []
      this.timeTypeList = []
      this.modelList = []
      if (carBrandId) {
        this.requestVehicleList(carBrandId)
      }
    },
    // 车系
    seriesChangeHandle(seriesId) {
      const { carBrandId } = this.addForm
      this.addForm.timeType = ''
      this.addForm.modelId = ''
      this.timeTypeList = []
      this.modelList = []
      if (seriesId) {
        this.requestModelTimeType(carBrandId, seriesId)
      }
    },
    // 年款
    timeTypeChangeHandle(timeType) {
      const { carBrandId, seriesId } = this.addForm
      this.addForm.modelId = ''
      this.modelList = []
      if (timeType) {
        this.requestCarModelList(carBrandId, seriesId, timeType)
      }
    },
    // 请求车系
    requestVehicleList(brandId) {
      getSeries(brandId).then(({ success, data }) => {
        if (success) {
          this.vehicleList = data || []
        }
      })
    },
    // 请求年款
    requestModelTimeType(brandId, seriesId) {
      getModelTimeType(brandId, seriesId).then(({ success, data }) => {
        if (success) {
          console.log(data)
          this.timeTypeList = data || []
        }
      })
    },
    // 请求车型
    requestCarModelList(brandId, seriesId, timeTypeId) {
      getModelRank(brandId, seriesId, timeTypeId).then(({ success, data }) => {
        if (success) {
          this.modelList = data || []
        }
      })
    },
    // 保存
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.add()
        }
      })
    },
    async add() {
      if (this.$route.query.id) {
        const { success } = await update({ ...this.addForm })
        if (success) {
          this.$router.push({ name: 'carEstimatedRebate' })
        }
      } else {
        const { success } = await save({ ...this.addForm })
        if (success) {
          this.$router.push({ name: 'carEstimatedRebate' })
        }
      }
    },
    async details() {
      const { data } = await details(this.$route.query.id)
     
      this.requestVehicleList(data.carBrandId)
   await  this.seriesChangeHandle(data.seriesId)
    await this.requestModelTimeType(data.carBrandId,data.seriesId)
    await this.requestCarModelList(data.carBrandId,data.seriesId,data.timeType)
 this.addForm = data
    }
  }
}
</script>
<style lang='scss' scoped>
.bg-form {
  background: #ffffff;
  padding: 20px;
}
</style>

